<template>
  <div class="content-nav">
    <el-tree
      :props="defaultProps"
      lazy
      :load="loadNode"
      :expand-on-click-node="false"
      :render-content="renderContent"
      default-expand-all	
    >
    </el-tree>
    <!-- 添加  -->
    <el-dialog
      title="添加子导航"
      :visible.sync="dialogAddNavVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="navForm" :model="navForm">
        <el-form-item label="导航名字">
          <el-input v-model="navForm.name" type="text"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddNavVisible = false">取 消</el-button>
        <el-button type="primary" @click="addContentNavHandle">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改  -->
    <el-dialog
      title="修改子导航"
      :visible.sync="dialogUpdateNavVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="navUpdateForm" :model="navUpdateForm">
        <el-form-item label="导航名字">
          <el-input v-model="navUpdateForm.name" type="text"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddNavVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateContentNavHandle">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      dialogAddNavVisible: false,
      dialogUpdateNavVisible:false,
      navForm: {
        name: "",
      },
      navUpdateForm:{
        name:''
      },
      navContent: {},
    };
  },
  inject:["reload"],
  methods: {
    //关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //请求导航数据
    http(id, resolve) {
      this.$api.getSelectContentCategoryByParentId(id).then((res) => {
        // console.log(res);
        if (res.data.status === 200) {
          return resolve(res.data.result);
        } else {
          return resolve([]);
        }
      });
    },
    // 点击导航
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.http({ id: 1 }, resolve);
      }
      if (node.level >= 1) {
        this.http(
          {
            id: node.data.pid,
          },
          resolve
        );
      }
    },
    //右侧按钮
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span style="margin-left:50%">
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(node, data)}
            >
              添加子分类
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              删除
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.editor(node, data)}
            >
              修改
            </el-button>
          </span>
        </span>
      );
    },
    // 点击添加
    append(node, data) {
      this.navContent = node.data;
      this.dialogAddNavVisible = true;
    },
    //点击删除
    remove(node,data) {
        this.$api.getDeleteContentCategory({
            pid:node.data.pid
        }).then(res=>{
            // console.log(res);
            if(res.data.status === 200){
                this.reload();
            }
        })
    },
    // 点击修改
    editor(node,data) {
        this.navContent =data
        this.dialogUpdateNavVisible = true
    },
    //添加
    addContentNavHandle() {
      this.$api
        .getInsertContentCategory({
          pid: this.navContent.pid,
          name: this.navForm.name,
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.dialogAddNavVisible = false;
            this.reload();
          } else {
            this.$message.error("错了哦，这是一条错误消息");
          }
        });
    },
    //修改
    updateContentNavHandle(){
      this.$api.getUpdateContentCategory({
          pid: this.navContent.pid,
          name: this.navUpdateForm.name,
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.dialogUpdateNavVisible= false;
            this.reload();
          } else {
            this.$message.error("错了哦，这是一条错误消息");
          }
        });
    }
  },
};
</script>

<style scoped>
</style>